<template>
  <xtxBread>
      <XtxBreadItem  to="/">首页</XtxBreadItem>
      <XtxBreadItem v-if="category.top" :to="`/category/${category.top.id}`">{{category.top.name}}</XtxBreadItem>
      <transition mode="out-in" name="fade-right">
      <XtxBreadItem v-if="category.sub" :key="category.sub.id">{{category.sub.name}}</XtxBreadItem>
      </transition>
  </xtxBread>
</template>

<script>
import xtxBread from '@/components/library/xtx-bread.vue'
import XtxBreadItem from '@/components/library/xtx-bread-item.vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { computed } from 'vue-demi'
export default {
  components: { xtxBread, XtxBreadItem },
  setup () {
    const route = useRoute()
    const store = useStore()
    // console.log(route.params.id)
    // console.log(store.state.category.list)
    const category = computed(() => {
      const tempCate = {}
      store.state.category.list.forEach(item => {
        item.children && item.children.forEach(sub => {
          if (sub.id === route.params.id) {
            // 设置二级类目
            tempCate.sub = { id: sub.id, name: sub.name }
            // 设置一级类目
            tempCate.top = { id: item.id, name: item.name }
          }
        })
      })
      return tempCate
    })
    console.log(category)
    return { category }
  }

}
</script>

<style>

</style>
